<template>
    <div class="designer-detail" id="designerDetail">
        <button class="btn btn-primary pull-right" v-show="!edit" @click="edit = true">修改</button>
        <button class="btn btn-primary pull-right" v-show="edit" @click="edit = false">取消</button>
        <h1>基本信息</h1>
        <vue-form class="row" :state="formstate" @submit.prevent="onSubmit" :action="formAction(oldUser)" method="post">
            <dl class="dl-horizontal">
                <dt>姓名：</dt>
                <dd v-if="user.name && !edit">{{user.name}}</dd>
                <dd v-else-if="!edit">未填写</dd>
                <validate tag="dd" v-else class="edit-dd">
                    <input type="text" class="form-control" v-model="user.name" required name="user[name]" placeholder="姓名" />

                    <field-messages name="user[name]" class="error" show="$touched || $submitted">
                        <div class="text-red" slot="required">请输入姓名!</div>
                    </field-messages>
                </validate>

                <dt v-if="user.mobile && !edit">绑定手机：</dt>
                <dd v-if="user.mobile && !edit">{{user.mobile}}</dd>

                <dt>职位：</dt>
                <dd v-if="user.position && !edit">{{user.position}}</dd>
                <dd v-else-if="!edit">未填写</dd>
                <validate tag="dd" v-else class="edit-dd">
                    <input type="text" class="form-control" v-model="user.position" required name="user[position]" placeholder="职位" />

                    <field-messages name="user[position]" class="error" show="$touched || $submitted">
                        <div class="text-red" slot="required">请输入职位!</div>
                    </field-messages>
                </validate>

                <dt>个人介绍：</dt>
                <dd v-if="user.description && !edit">{{user.description}}</dd>
                <dd v-else-if="!edit">未填写</dd>
                <validate tag="dd" v-else class="edit-dd">
                    <textarea class="form-control" v-model="user.description" required name="user[description]" placeholder="个人介绍" />

                    <field-messages name="user[description]" class="error" show="$touched || $submitted">
                        <div class="text-red" slot="required">请输入个人介绍!</div>
                    </field-messages>
                </validate>
            </dl>

            <input type="hidden" name="_method" value="PUT">
            <input type="hidden" name="authenticity_token" :value="getAuthToken()">

            <div class="row" v-show="edit">
                <div class="col-xs-10 text-center">
                    <button type="submit" class="btn btn-primary">保存</button>
                </div>
            </div>
        </vue-form>
    </div>
</template>

<script>
import VueForm from 'vue-form'
import ErrorDialog from 'error_alert'
import SuccessDialog from 'success_alert'

var options = {
    validators: {
    }
}


export default {
    name: 'designerDetail',

    props: {
        oldUser: {
            required: true,
            type: Object
        }
    },

    data: () => ({
        edit: false,
        formstate: {},
        user: {
            name: '',
            mobile: '',
            position: '',
            description: ''
        }
    }),

    mounted: function mounted() {
        this.user = this.oldUser
    },

    methods: {
        formAction(user) {
          return "/users/" + user.id
        },
        getAuthToken: function() {
          return AUTH_TOKEN
        },
        onSubmit: function () {
          if (this.formstate.$invalid) {
            // alert user and exit early
            return;
          }
          $('form').submit()
        }
    },

    mixins: [new VueForm(options)]
}
</script>

<style lang="less" scoped>
.designer-detail {
    dt {
        width: 100px;
        color: #999999;
    }

    dd {
        margin-left: 120px;
        color: #222222;
        width: 50%;
        margin-bottom: 20px;
    }

    input,
    textarea {
        padding: 15px 20px;
        background-color: #FCFCFD;
        border: 1px solid #dddddd;
        outline: none;
        box-shadow: none;
    }

    input {
        height: 45px;
    }
}
</style>
